<template>
  <div class="login-container">
    <div class="login-card">
      <!-- 公司Logo和标题 -->
      <div class="logo-container">
        <div class="logo">
<!--          <svg viewBox="0 0 100 100" class="logo-svg">
            <path d="M50 0 L100 50 L50 100 L0 50 Z" fill="#FF6B6B"/>
            <circle cx="50" cy="50" r="30" fill="#4ECDC4"/>
            <path d="M35 35 L65 65 M65 35 L35 65" stroke="#FFF" stroke-width="5"/>
          </svg>-->
          <img
              src="@/assets/logo.png"
              alt="深圳中博纳Logo"
              class="company-logo"
          />
        </div>
        <h1 class="company-name">深圳中博纳</h1>
        <p class="welcome-text">欢迎登录中博纳油耗后台管理系统</p>
      </div>

      <!-- 登录表单 -->
      <el-form class="login-form" @submit.prevent="handleLogin">
        <el-form-item>
          <el-input
              v-model="loginForm.username"
              placeholder="请输入用户名"
              :prefix-icon="User"
              size="large"
          />
        </el-form-item>
        <el-form-item>
          <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              :prefix-icon="Lock"
              size="large"
              show-password
          />
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="rememberMe">记住我</el-checkbox>
          <el-link type="primary" class="forgot-password">忘记密码?</el-link>
        </el-form-item>
        <el-button
            type="primary"
            size="large"
            native-type="submit"
            class="login-btn"
            :loading="loading"
        >
          登 录
        </el-button>
      </el-form>
    </div>
  </div>
</template>



<script setup>
import { ref } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import authApi  from '@/api/auth'

import { useStore } from 'vuex'
const store = useStore()

const router = useRouter()

const loginForm = ref({
  username: '',
  password: ''
})

const rememberMe = ref(false)
const loading = ref(false)

const handleLogin = async () => {
  console.log("开始登录")
  if (!loginForm.value.username || !loginForm.value.password) {
    ElMessage.warning('请输入账号和密码')
    return
  }

  loading.value = true

  try {
    // 调用登录API
    const response = await authApi.login(
        loginForm.value.username,
        loginForm.value.password
    )
    console.log(response)
    if (response.status == 200 &&  response.data.code == 200){
      // 保存token和用户信息
      store.commit('SET_USER', {
        username: loginForm.value.username,
        token: response.data.data.token
      })

      // 跳转到首页或重定向页面
      const redirect = router.currentRoute.value.query.redirect || '/'
      router.push(redirect)

      ElMessage.success('登录成功')
    }else{
      ElMessage.error(response.data.message)
    }

  } catch (error) {
    console.error('登录失败:', error)

    // 处理不同的错误情况
    if (error.response) {
      // HTTP错误响应
      const msg = error.response.data.message || '登录失败'
      ElMessage.error(msg)
    } else if (error.request) {
      // 请求未收到响应
      ElMessage.error('网络错误，请检查网络连接')
    } else {
      // 其他错误
      ElMessage.error(error.message || '登录异常')
    }
  } finally {
    loading.value = false
  }
}
</script>


<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 0 20px;
}

.login-card {
  width: 400px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.logo-container {
  text-align: center;
  margin-bottom: 30px;
}

.logo {
  width: 80px;
  height: 80px;
  margin: 0 auto 15px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.logo-svg {
  width: 50px;
  height: 50px;
}

.company-name {
  color: #333;
  font-size: 24px;
  margin: 0;
  font-weight: 600;
  background: linear-gradient(to right, #FF6B6B, #4ECDC4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.welcome-text {
  color: #666;
  font-size: 14px;
  margin-top: 5px;
}

.login-form {
  margin-top: 30px;
}

.forgot-password {
  float: right;
}

.login-btn {
  width: 100%;
  margin-top: 10px;
  background: linear-gradient(to right, #FF6B6B, #4ECDC4);
  border: none;
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2px;
  transition: all 0.3s;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}
.company-logo {
  width: 120px;
  height: 120px;
  margin-bottom: 15px;
  object-fit: contain;
}
</style>